<template>
  <div class="container">
    <div class="taskTop" />
    <div class="divUl">
      <ul>
        <h1>任务列表</h1>
        <li v-for="(item,index) in menuList" :key="index">
          <div @click="clickMenu(item)">
            <b v-show="item.markNum > 0">{{ item.markNum }}</b>
            <!-- <img :src="item.url"> -->
            <svg class="icon" aria-hidden="true">
              <use :xlink:href="item.icont" />
            </svg>
            <span>{{ item.name }}</span>
          </div>
        </li>
      </ul>
      <div class="clearfix" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      menuListShow: [],
      menuList: [
        {
          name: '来料检',
          icont: '#icon-lailiaojianyan',
          href: './incomingInspection',
          markNum: ''
        },
        {
          name: '首件检',
          icont: '#icon-shoumojian',
          href: './firstInspection',
          markNum: ''
        },
        // {
        //   name: '产线巡检',
        //   icont: '#icon-xunjiansaoma',
        //   href: './patrolInspection',
        //   markNum: ''
        // },
        // {
        //   name: '工序检',
        //   icont: '#icon-gongxujiansaoma',
        //   href: './processInspection',
        //   markNum: ''
        // },
        {
          name: '隔离品处置',
          icont: '#icon-a-iconchuzhizhong',
          href: './isolationProductDisposal',
          markNum: ''
        },
        // {
        //   name: '返工返修检',
        //   icont: '#icon--_fanxiu',
        //   href: './RepairAndRework',
        //   markNum: ''
        // },
        // {
        //   name: '成品检',
        //   icont: '#icon-mojianjiansaoma',
        //   href: './finishedProInspection',
        //   markNum: ''
        // },
        // {
        //   name: '设备点检',
        //   icont: '#icon-shebeidianjian',
        //   href: './equipmentInspection',
        //   markNum: ''
        // },
        // {
        //   name: '设备维修',
        //   icont: '#icon-m_asm',
        //   href: './eqRepair',
        //   markNum: ''
        // },
        // {
        //   name: '设备保养',
        //   icont: '#icon-baoyang',
        //   href: './eqMaintain',
        //   markNum: ''
        // },
        // {
        //   name: '返修流程卡',
        //   icont: '#icon-liuchengkaguanli',
        //   href: './processCard',
        //   markNum: ''
        // },
        // {
        //   name: '报废单',
        //   icont: '#icon-baofeidan',
        //   href: './scrapInfo',
        //   markNum: ''
        // }
      ]
    }
  },
  mounted() {
    // this.getMenuNav()
  },
  methods: {
    async getMenuNav() {
      const toast = this.$toast.loading({
        duration: 0, // 持续展示 toast
        message: '加载中...',
        forbidClick: true,
        loadingType: 'spinner'
      })
      const res = await this.$axios.get('/dobo-product/pad/getCornerMark')
      if (res.data.code === 200) {
        setTimeout(() => {
          if (res.data.data.length > 0) {
            res.data.data.forEach((item) => {
              // if (item.isShow === 1) {
              this.menuList.forEach((itx) => {
                if (itx.name === item.menu) {
                  itx.markNum = item.cornerMarkCount
                  this.menuListShow.push(itx)
                }
              })
              // }
            })
          } else {
            this.menuListShow = this.menuList
          }
          toast.clear()
        }, 10)
      }
    },
    /** 点击菜单跳转 */
    clickMenu(row) {
      localStorage.setItem('name', row.name)
      this.$router.push(row.href)
    }
  }
}
</script>
<style lang='scss' scoped>
.container {
}
.taskTop {
  height: 230px;
  background: url(../../assets/images/myBg.png) no-repeat bottom #022566;
  background-size: 100% auto;
}
.divUl {
  width: 100vw;
  position: relative;
  height: 500px;
  ul {
    overflow: hidden;
    width: 90vw;
    margin: 0 5vw;
    padding-bottom: 20px;
    position: absolute;
    top: -70px;
    background: #fff;
    box-shadow: 1px 2px 3px 1px rgb(238, 238, 238);
    border-radius: 10px;
    h1 {
      font-size: 25px;
      height: 70px;
      line-height: 70px;
      border-bottom: 1px solid #ccc;
      font-weight: normal;
      text-align: center;
      margin-bottom: 15px;
      color: #022566;
    }
    li {
      width: calc(100% / 4);
      float: left;
      padding: 1.2vw 2vw;
      div {
        width: 100%;
        height: 100%;
        padding: 15% 0%;
        text-align: center;
        // background: #1CACFF;
        // border:1px solid #022566;
        box-shadow: 0px 1px 3px 0px rgb(2, 37, 102, 0.2);
        border-radius: 20px;
        position: relative;
        img {
          width: 50%;
        }
        .icon {
          width: 50px;
          height: 50px;
        }
        span {
          display: block;
          width: 100%;
          text-align: center;
          height: 50px;
          line-height: 50px;
          color: #022566;
          font-size: 20px;
          // font-weight: bold;
        }
        b {
          position: absolute;
          display: inline-block;
          right: 5px;
          top: 10px;
          width: 30px;
          height: 30px;
          line-height: 30px;
          background: red;
          text-align: center;
          color: #fff;
          border-radius: 30px;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
<style lang='scss'>
</style>
